<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIVCSS5可拖动DIV提示窗口</title>
    <script language="javascript">

        class WindMove {
            _moveX = 0;
            _moveY = 0;
            _moveTop = 0;
            _moveLeft = 0;
            _moveable = false;
            _docMouseMoveEvent = null; //www.divcss5.com divcss5
            _docMouseUpEvent = null
            _titleBar = null
            _windowObj = null
            _documentObj = null
            _iWidth = 100
            _iHeight = 50
            _containerObj = null
            _containerWidth = 0
            _containerHeight = 0
            
            constructor(windowObj, documentObj, moveTargetObj, containerObj, containerWidth, containerHeight) {
                this._documentObj = documentObj
                this._docMouseMoveEvent = this._documentObj.onmousemove
                this._docMouseUpEvent = this._documentObj.onmouseup
                this._titleBar = moveTargetObj
                this._windowObj = windowObj
                this._iWidth = this._documentObj.documentElement.clientWidth
                this._iHeight = this._documentObj.documentElement.clientHeight
                this._containerObj = containerObj
                this._containerHeight = containerHeight
                this._containerWidth = containerWidth
            }
            _init_() {
                this.createOnmousedown()
            }
            createOnmousedown() {
                this._titleBar.onmousedown = () => {
                    var evt = this.getEvent();
                    this._moveable = true;
                    this._moveX = evt.clientX;
                    this._moveY = evt.clientY;
                    this._moveTop = parseInt(this._containerObj.style.top);
                    this._moveLeft = parseInt(this._containerObj.style.left);

                    this._documentObj.onmousemove = () => {
                        if (this._moveable) {
                            var evt = this.getEvent();
                            var x = this._moveLeft + evt.clientX - this._moveX; //www.divcss5.com divcss5
                            var y = this._moveTop + evt.clientY - this._moveY;
                            if (x > 0 && (x + this._containerWidth < this._iWidth) && y > 0 && (y + this._containerWidth < this._iHeight)) {
                                this._containerObj.style.left = x + "px";
                                this._containerObj.style.top = y + "px";
                            }
                        }
                    };
                    this._documentObj.onmouseup = () => {
                        if (this._moveable) {
                            this._documentObj.onmousemove = this._docMouseMoveEvent; //www.divcss5.com divcss5
                            this._documentObj.onmouseup = this._docMouseUpEvent;
                            this._moveable = false;
                            this._moveX = 0;
                            this._moveY = 0;
                            this._moveTop = 0;
                            this._moveLeft = 0;
                        }
                    };
                }
            }
            getEvent() {
                return this._windowObj.event || arguments.callee.caller.arguments[0];
            }

        }


        function alertWin(title, msg, w, h) {
            var titleheight = "22px"; // 提示窗口标题高度
            var bordercolor = "#666699"; // 提示窗口的边框颜色
            var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
            var titlebgcolor = "#666699"; // 提示窗口的标题背景色
            var bgcolor = "#FFFFFF"; // 提示内容的背景色

            var iWidth = document.documentElement.clientWidth;
            var iHeight = document.documentElement.clientHeight;
            var bgObj = document.createElement("div");
            bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:" + iWidth + "px;height:" + Math.max(document.body.clientHeight, iHeight) + "px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
            document.body.appendChild(bgObj);

            var msgObj = document.createElement("div");
            msgObj.style.cssText = "position:absolute;font:11px '宋体';top:" + (iHeight - h) / 2 + "px;left:" + (iWidth - w) / 2 + "px;width:" + w + "px;height:" + h + "px;text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:102;";
            document.body.appendChild(msgObj);

            var table = document.createElement("table"); //www.divcss5.com divcss5
            msgObj.appendChild(table);
            table.style.cssText = "margin:0px;border:0px;padding:0px;";
            table.cellSpacing = 0;
            var tr = table.insertRow(-1);
            var titleBar = tr.insertCell(-1);
            // titleBar.style.cssText = "width:100%;height:" + titleheight + "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:" + titlecolor + ";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
            titleBar.style.cssText = "width:100%;height:50px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:" + titlecolor + ";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
            titleBar.style.paddingLeft = "10px";
            titleBar.innerHTML = title;
            var moveX = 0;
            var moveY = 0;
            var moveTop = 0;
            var moveLeft = 0;
            var moveable = false;
            var docMouseMoveEvent = document.onmousemove; //www.divcss5.com divcss5
            var docMouseUpEvent = document.onmouseup;
            new WindMove(window, document, titleBar, msgObj, w, h)._init_()

            // titleBar.onmousedown = function () {
            //     var evt = getEvent();
            //     moveable = true;
            //     moveX = evt.clientX;
            //     moveY = evt.clientY;
            //     moveTop = parseInt(msgObj.style.top);
            //     moveLeft = parseInt(msgObj.style.left);

            //     document.onmousemove = function () {
            //         if (moveable) {
            //             var evt = getEvent();
            //             var x = moveLeft + evt.clientX - moveX; //www.divcss5.com divcss5
            //             var y = moveTop + evt.clientY - moveY;
            //             console.log('===========', x + w, w, y + h, h);
            //             if (x > 0 && (x + w < iWidth) && y > 0 && (y + h < iHeight)) {
            //                 msgObj.style.left = x + "px";
            //                 msgObj.style.top = y + "px";
            //             }
            //         }
            //     };
            //     document.onmouseup = function () {
            //         if (moveable) {
            //             document.onmousemove = docMouseMoveEvent; //www.divcss5.com divcss5
            //             document.onmouseup = docMouseUpEvent;
            //             moveable = false;
            //             moveX = 0;
            //             moveY = 0;
            //             moveTop = 0;
            //             moveLeft = 0;
            //         }
            //     };
            // }

            var closeBtn = tr.insertCell(-1);
            closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
            closeBtn.innerHTML = "<span style='font-size:15pt; color:" + titlecolor + ";'>×</span>";
            closeBtn.onclick = function () {
                document.body.removeChild(bgObj);
                document.body.removeChild(msgObj);
            }
            var msgBox = table.insertRow(-1).insertCell(-1);
            msgBox.style.cssText = "font:10pt '宋体';";
            msgBox.colSpan = 2;
            msgBox.innerHTML = msg;

            // 获得事件Event对象，用于兼容IE和FireFox
            function getEvent() {
                return window.event || arguments.callee.caller.arguments[0];
            }
        }
    </script>
</head>

<body>
    <input type="button" value="DIVCSS5"
        onclick="alertWin('演示','我是<a href=\'http://www.divcss5.com\'>CSS</a>内容300是宽度200是高度',300,200);" />
</body>

</html>